<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">出租信息(A)详情</small>
      </a>
    </header>
    <main>
      <section class="detail_status_info" v-if="this.keys===1">
        <header><span>基本信息</span></header>
        <p><label>物业名称</label><span>{{this.listData.fld_18}}</span></p>
        <p><label>单位名称</label><span>{{this.listData.fld_2}}</span></p>
        <p><label>评估月租金：</label><span>{{this.listData.fld_6}}</span></p>
        <p><label>招租方式：</label><span>{{this.listData.fld_2}}</span> </p>
        <p><label>招租期限：</label><span>{{this.listData.fld_4}}</span> </p>
        <p><label>公示开始日</label><span>{{this.listData.fld_12}}</span> </p>
        <p><label>公示截止日 </label><span>{{this.listData.fld_61}}</span> </p>
        <p><label>报名截止日</label><span>{{this.listData.fld_13}}</span> </p>
        <p><label>出租面积</label><span>{{this.listData.fld_21}}</span> </p>
        <p><label>报名地点和方式</label><span>{{this.listData.fld_14}}</span> </p>
        <p><label>联系人</label><span>{{this.listData.fld_50}}</span> </p>
        <p><label>报名电话</label><span>{{this.listData.fld_51}}</span> </p>
      </section>
      
      <section class="detail_status_info" v-else-if="this.keys===2">
        <header><span>基本信息</span></header>
        <p><label>物业名称</label><span>{{this.listData.fld_12}}</span></p>

        <p><label>单位名称</label><span>{{this.listData.fld_22}}</span></p>

        <p><label>评估月租金：</label><span>{{this.listData.fld_4}}</span></p>

        <p><label>招租方式：</label><span>{{this.listData.fld_7}}</span> </p>
        <p><label>预计租期：</label><span>{{this.listData.fld_18}}</span> </p>
        <p><label>租赁面积：</label><span>{{this.listData.fld_14}}</span> </p>
        <p><label>租金递增方式:</label><span>{{this.listData.fld_23}}</span> </p>
        <p><label>中标承租户名称:</label><span>{{this.listData.fld_3}}</span> </p>
        <p><label>中标租金:</label><span>{{this.listData.fld_32}}</span> </p>
      </section>


      <section class="detail_status_info" v-else-if="this.keys===3">
        <header><span>基本信息</span></header>
        <p><label>物业名称</label><span></span></p>
        <p><label>租赁面积</label><span></span></p>
        <p><label>租赁开始日期</label><span>{{this.listData.fld_10}}</span></p>
        <p><label>租赁结束日期</label><span>{{this.listData.fld_11}}</span> </p>
        <p><label>合同编号</label><span>{{this.listData.fld_1}}</span> </p>
        <p><label>单位名称</label><span></span> </p>
        <p><label>承租户:</label><span></span> </p>
        <p><label>递增率:</label><span>{{this.listData.fld_59}}</span> </p>
        <p><label>租金:</label><span>{{this.listData.fld_67}}</span> </p>
      </section>
      <section v-else>
        Not A/B/C
      </section>

    </main>
  </div>
</template>

<script>
  import {
    ViewDetail
  } from '../../../api/api';
  export default {
    data() {
      return {
        listData: {},
        keys:this.$route.query.keys
      };
    },
    methods: {
      getData() {
        let options = {
          params: {
            unid: this.$route.query.unid,
          }
        }
        //调取接口
        ViewDetail(options).then((res) => {
          this.listData = res.fields
        })
      }
    },
    
    mounted() {
      this.getData();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  
</style>
